﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>Light Package Form Demo</title>
<meta name="keywords" content="JavaScript,jQuery,plugin,プラグイン,form,フォーム,LPFORM,light package form" xml:lang="ja" lang="ja" />
<meta name="description" content="Light Package FormはWeb上のフォームを、より簡単に実装するためのjQueryプラグインです。軽快な動作、幅広い環境への対応、開発作業の軽減を目指しています。" xml:lang="ja" lang="ja" />
<meta name="author" content="JSC" xml:lang="ja" lang="ja" />
<meta name="copyright" content="Copyright (C) JSC. All rights reserved." />
<link rel="stylesheet" href="sample-style/lpform.css" type="text/css" media="screen, projection, tv" />
<link href="sample-style/prettify.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="jquery/jquery_min.js" type="text/javascript"></script>
<!--script language="JavaScript" src="lpform/lpform.js" type="text/javascript"></script-->
<script language="JavaScript" src="sample-style/prettify.js " type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	//new $FORM;
	$("pre").addClass("prettyprint");
	//;
});
</script>
</head>
<body id="top" onload="prettyPrint()">
<div id="header"><h1>Light Package Form config sample</h1></div>

<div id="contents">
	<p class="nav"><a href="http://code.google.com/p/lpform/">TOP</a> &gt;&gt; 設定方法</p>
    <p>LPFORM Demoの<a href="http://lpform.googlecode.com/svn/trunk/sample.htm" target="_blank">HTML</a>と<a href="sample-style/lp_config.js">設定ファイル</a>をベースに、設定の書き方を説明します。</p>
	<br />
	<p>【　HTMLのフォーマット図 　】<br />
    <img src="sample-style/html_format.png" width="603" height="587" alt="" /><br />
    <br />
    HTML:</p>
<pre>&lt;script language=&quot;JavaScript&quot; src=&quot;jquery_min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script language=&quot;JavaScript&quot; src=&quot;lpform.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script language=&quot;JavaScript&quot; src=&quot;lp_config.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt;<br />$(document).ready(function() {<br />	new $FORM;<br />});<br />&lt;/script&gt;</pre>
	<p>jQueryとLPFORM、設定ファイルを読み込み、ページ読み込み完了後「new $FORM;」を実行します。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre class="prettyprint">// フォームidとメソッド(POST/GET)
$FORM.prototype._form={
	&quot;id&quot; : &quot;lpform&quot;,
	&quot;method&quot; : &quot;POST&quot;
};</pre>
	<p>HTML:</p>
<pre>&lt;form id=&quot;lpform&quot; method=&quot;post&quot; action=&quot;./form.php&quot;&gt;</pre>
	<p>	FORMタグに合わせて設定します。<br />
	<br />
	<br />
	設定ファイル:<br />
<pre>// ページid
$FORM.prototype._page={
	&quot;form&quot; : [&quot;page1&quot;,&quot;page2&quot;],
	&quot;confirm&quot; : {
 	&quot;head&quot; : &quot;confirmhead&quot;,
 	&quot;foot&quot; :&quot;confirmfoot&quot;
	},
	&quot;finish&quot; : &quot;finish&quot;
};</pre>
	<p>HTML:</p>
<pre>&lt;span id=&quot;page1&quot;&gt;ページコンテンツ&lt;/span&gt;</pre>
	<p>	上記のようにページごとに区切るDIVやSPANタグ等のidを指定します。<br />
	確認画面は&quot;form&quot;で指定したページ内のコンテンツを挟み込むので<br />
	画面上部&quot;head&quot;と、画面下部&quot;foot&quot;に分けて指定します。<br />
	&quot;finish&quot;は、送信完了後に表示するページになります。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre>// ページ遷移ボタンid,class
$FORM.prototype._button={
	&quot;next&quot; : &quot;.goconfirm&quot;,
	&quot;back&quot; : &quot;.backpage&quot;
};</pre>
	<p>HTML:</p>
<pre>&lt;input type=&quot;button&quot;  name=&quot;back&quot; value=&quot;前の画面に戻る&quot; class=&quot;backpage&quot; /&gt;
&lt;input type=&quot;button&quot; name=&quot;next&quot; value=&quot;次の画面へ進む&quot; class=&quot;goconfirm&quot; /&gt;</pre>
	<p>	画面遷移に使用するボタンをidかclassで指定します。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre>// 確認画面で出さないid,class
$FORM.prototype._noconfirm=[&quot;.noconfirm&quot;];</pre>
	<p>HTML:</p>
<pre>&lt;span class=&quot;noconfirm&quot;&gt;（必須）&lt;/span&gt;</pre>
	<p>	確認画面で表示しない部分をidやclassで指定します。複数指定可能です。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre>// 通信中表示(指定すると&lt;div id=&quot;lpf_loading&quot;&gt;表示&lt;/div&gt;が生成されます)
$FORM.prototype._loading='&lt;img src=&quot;/japan/common/images/loading.gif&quot; /&gt;&lt;br /&gt;通信中';</pre>
	<p>	サーバーサイドと通信中、loadingを表示したい時に指定します。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre>// バリデータ
$FORM.prototype._regexp =<br />{<br />	'page1' : {<br />		&quot;name_l&quot; : /^\S+$/,<br />		&quot;name_f&quot; : /^\S+$/,<br />		&quot;name_l_kana&quot; : /^\S+$/,<br />		&quot;name_f_kana&quot; : /^\S+$/,<br />		&quot;email&quot; : /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/,<br />		&quot;postal_code&quot; : /^\d{3}[\-]?\d{4}$/,<br />		&quot;address&quot; : /^\S+$/,<br />		&quot;building&quot; : /^.*$/,<br />		&quot;tel_no&quot; : /^\d[\d\-]+$/,<br />		&quot;fax_no&quot; : /^\d[\d\-]+$|^$/,<br />		&quot;dm_email&quot; : /^\S+$/<br />	},<br />	'page2' : {<br />		&quot;key&quot; : /^.*$/m<br />	}<br />};</pre>
	<p>HTML:</p>
<pre>&lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot;/&gt;</pre>
	<p>各入力項目のバリデータチェックを正規表現で指定します。<br />
	<br />
	<br />
	設定ファイル:</p>
<pre>// バリデータエラー時/正常時の動作/特殊バリデータ
$FORM.prototype._validate = {<br />	&quot;error&quot; : function(){<br />		if($(&quot;#lpf_val_&quot;+key).length == 0)<br />			$(&quot;#validerr&quot;).append('&lt;div id=&quot;lpf_val_'+key+'&quot; class=&quot;validate&quot;&gt;'+$(&quot;#lpf_&quot;+key).val()+'が正しくありません。&lt;/div&gt;');<br />		if(!/checkerr/.test($(&quot;:input[name='&quot;+key+&quot;']&quot;).attr(&quot;class&quot;)))<br />			$(&quot;:input[name='&quot;+key+&quot;']&quot;).addClass(&quot;checkerr&quot;);<br />		$(&quot;:input[name='&quot;+key+&quot;']&quot;).parent(&quot;dd&quot;).parent(&quot;dl&quot;).attr(&quot;class&quot;,&quot;checkerr&quot;);<br />	},<br />	&quot;normal&quot; : function(){<br />		if($(&quot;#lpf_val_&quot;+key).length &gt; 0)<br />			$(&quot;#lpf_val_&quot;+key).remove();<br />		if(/checkerr/.test($(&quot;:input[name='&quot;+key+&quot;']&quot;).attr(&quot;class&quot;)))<br />			$(&quot;:input[name='&quot;+key+&quot;']&quot;).removeClass(&quot;checkerr&quot;);<br />		if(!/checkerr/.test($(&quot;:input[name='&quot;+key+&quot;']&quot;).prevAll(&quot;:input&quot;).attr(&quot;class&quot;)))<br />			$(&quot;:input[name='&quot;+key+&quot;']&quot;).parent(&quot;dd&quot;).parent(&quot;dl&quot;).removeClass(&quot;checkerr&quot;);<br />	}<br />};</pre>
	<p>バリデータチェック時の正常時/エラー時/特殊バリデーター時の動作を設定します。<br />
	上記の設定例では、エラーのあった項目名を&lt;DIV id=&quot;validerr&quot;&gt;&lt;/DIV&gt;に表示し、エラーのある各入力項目と入力欄の色を変更しています。(参考：<a href="sample-style/lpform.css" target="_blank">CSS表示設定</a>)<br />
	<img src="sample-style/valid_err.png" alt="バリデーションエラー画面" border="1"/><br />
	<br />
	設定ファイル:</p>
<pre>// Ajax通信正常時/エラー時
$FORM.prototype._ajax = {
	&quot;success&quot; : function(data, status){
 	if(data != &quot;true&quot;)
	 	alert(&quot;送信完了！&quot;);
	},
	&quot;error&quot; : function(XMLHttpRequest, status, errorThrown){ 
	 	alert(&quot;通信中にエラーが発生しました&quot;);
	}
};</pre>
	<p>	サーバーサイドとの通信結果の正常時とエラー時の処理を指定します。</p>
	<br /><br />
</div>
</body>
</html>